<template>
    <div class="addfaccont">
    <el-row class="helptitle">{{title}}</el-row>

    <div class="helpmain">
      <div class="r_main" >
         <el-form ref="regform" :model="regform" label-width="130px">
          <el-form-item label="设备类型：">
             <el-select v-model="regform.type" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="设备名称：">
                <el-input v-model="regform.name"  placeholder="" ></el-input>
            </el-form-item>
            <el-form-item label="飞机型号：">
                <el-input v-model="regform.ptype"  placeholder="" ></el-input>
            </el-form-item>
            <el-form-item label="类型：">
              <template>
                <el-select v-model="regform.plane_type" placeholder="请选择">
                  <el-option
                    v-for="item in TypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
             <el-form-item label="机身重量(kg)：">
                <el-input v-model="regform.weight" placeholder=""></el-input>
            </el-form-item>
             <el-form-item label="起飞重量(kg)：">
                <el-input v-model="regform.weights" placeholder=""></el-input>
            </el-form-item>
             <el-form-item label="最大航程(km)：">
                <el-input v-model="regform.maxfat" placeholder=""></el-input>
            </el-form-item>
             <el-form-item label="巡航速度(m/s)：">
                <el-input v-model="regform.speed" placeholder=""></el-input>
            </el-form-item>
             <el-form-item label="动力方式：">
                <el-radio v-model="regform.radio" label="1">油动</el-radio>
                <el-radio v-model="regform.radio" label="2">电动</el-radio>
            </el-form-item>
             <el-form-item label="飞机图片：">
               <el-upload
                    class="avatar-uploader"
                    :action="UploadUrl+'/user/uploadPic'"
                    :data="{token: this.$store.getters.token}"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="regform.imgurl" :src="regform.imgurl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                     <span style="color:#606266"> (只支持JPG、PNG格式，大小不超过500kb！)</span>
            </el-form-item>
             <el-button class="submitlist" @click="handsubmit">完成</el-button>
              <div style="text-align: center;">
              <div class="greyline"></div>
            <router-link to="/facility" class="backlo"><i class="el-icon-back"></i>取消</router-link>
              </div>
         </el-form>
      </div>
       
    </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import request2 from "../../utils/request-new";
export default {
  name:'Addfacility',
  data(){
    return{
      UploadUrl:'',
      regform:{
          name:'',   //设备名称
          speed:'',  //速度
          maxfat:'',  //最大航程
          weight:'',  //机身重量
          weights:'', //起飞重量
          type:'0',  //设备类型
          ptype:'',   //飞机型号
          radio: '1',  //启动方式
          imgurl:'',
          plane_type:'',//类型
      },
      options:[
          {
              value:'0',
              label:'无人机'
          },{
              value:'1',
              label:'无人潜艇'
          },{
              value:'',
              label:''
          }
      ],
      imageUrl: '', //飞机图片
      title:'添加设备',
      TypeList:[],//类型数据
    }
  },
  mounted(){
    if(typeof(this.$route.query.id)!='undefined'){
      this.title='修改设备'
      this.getrequest(this.$route.query.id)
    }
    this._typeList() //类型列表
    this.UploadUrl=process.env.VUE_APP_UAVAPI_BASE
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.regform.imgurl=res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' ||file.type === 'image/png';
      const isLt2M = file.size /1024 < 500;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 500kb!');
      }
      return isJPG && isLt2M;
    },
    handsubmit(){
      if(this.regform.name==''){ 
        this.$message({
              type: 'warning',
              message: '请输入设备名称！'
        }); 
        return;
      }else if(this.regform.ptype==''){ 
        this.$message({
              type: 'warning',
              message: '请输入飞机型号！'
        }); 
        return;
      }else if(this.regform.plane_type==''){ 
        this.$message({
              type: 'warning',
              message: '请选择类型！'
        }); 
        return;
      }else if(this.regform.weight==''){ 
        this.$message({
              type: 'warning',
              message: '请输入机身重量！'
        }); 
        return;
      }else if(this.regform.weights==''){ 
        this.$message({
              type: 'warning',
              message: '请输入起飞重量！'
        }); 
        return;
      }else if(this.regform.maxfat==''){ 
        this.$message({
              type: 'warning',
              message: '请输入最大航程！'
        }); 
        return;
      }else if(this.regform.speed==''){ 
        this.$message({
              type: 'warning',
              message: '请输入巡航速度！'
        }); 
        return;
      }else if(this.regform.imgurl==''){ 
        this.$message({
              type: 'warning',
              message: '请上传飞机图片！'
        }); 
        return;
      }
      if(typeof(this.$route.query.id)!='undefined'){
        this.updaterequest(this.$route.query.id);
      }else{
        this.addrequest();
      }
    },
    _typeList(){ //类型列表
      request2({
        url: "/plane/planeTypeList",
        method: "post",
        data: {
          token: this.$store.getters.token,
        }
      })
      .then(response => {
        this.TypeList=response.data
      }).catch(err => {});
    },
    addrequest(){ //添加设备
      request2({
        url: "/plane/addPlaneModel",
        method: "post",
        data: {
          token: this.$store.getters.token,
          type:this.regform.type,     //类型
          title:this.regform.name,                 //设备名称
          name:this.regform.ptype,            //飞机型号
          plane_weight:this.regform.weight,         //飞机重量
          max_weight:this.regform.weights,          //起飞
          max_voyage:this.regform.maxfat,              //最大航程
          cruise_speed:this.regform.speed,         //巡航速度
          power_mode:this.regform.radio,            //动力方式
          url:this.regform.imgurl,                    //飞机图片
          plane_type:this.regform.plane_type //类型
        }
      })
      .then(response => {
        this.$message.success('添加成功');
        this.$router.replace('/facility');
      }).catch(err => {});
    },
    getrequest(id){//获取设备详情
      request2({
        url: "/plane/planeModelDetail",
        method: "post",
        data: {
          token: this.$store.getters.token,
          id:id
        }
      })
      .then(response => {
        this.regform.name=response.data.title, 
        this.regform.ptype=response.data.name,
        this.regform.maxfat=response.data.max_voyage, 
        this.regform.weights=response.data.max_weight, 
        this.regform.weight=response.data.plane_weight, 
        this.regform.radio=response.data.power_mode, 
        this.regform.imgurl=response.data.url,
        this.regform.speed=response.data.cruise_speed  
        this.regform.plane_type=response.data.plane_type  
      }).catch(err => {});
    },
    updaterequest(id){
      request2({
        url: "/plane/updatePlaneModel",
        method: "post",
        data: {
          token: this.$store.getters.token,
          id:id,
          type:this.regform.type,     //类型
          title:this.regform.name,                 //设备名称
          name:this.regform.ptype,            //飞机型号
          plane_weight:this.regform.weight,         //飞机重量
          max_weight:this.regform.weights,          //起飞
          max_voyage:this.regform.maxfat,              //最大航程
          cruise_speed:this.regform.speed,         //巡航速度
          power_mode:this.regform.radio,            //动力方式
          url:this.regform.imgurl                    //飞机图片
        }
      })
      .then(response => {
        this.$message.success('修改成功');
        this.$router.replace('/facility');
      }).catch(err => {});
    }
  }
}
</script>
<style lang="scss">
.addfaccont{
   .helptitle{
        color: #347dc7;
        padding: 0px 0 15px 0;
        text-align: center;
        font-size: 22px;
        font-weight: 500;
        padding-top: 20px;
   }
   .helpmain{
     margin-left: auto;
     margin-right: auto;
     background-color: #fff;
     width: 80%;
     margin-bottom: 50px;

   }
     .r_main{
      width: 80%;
      margin: 0 auto;
    .el-select{
        width: 100%;
    }
    .el-form{
        padding: 50px 0px;
    }
      .el-form-item{
          margin: 0px 10% 20px 10%
      }
     .send{
         background-color: #337DC7;
         color: #fff;
         width: 15%;
          border-radius: 0px;
     }
     .el-input__inner{
         border-radius: 0px;
     }
     .submitlist{
        width: 40%;
        background-color: #337DC7;
        color:#fff;
        margin-left: 30%;
        margin-bottom: 30px;
     }
   }
   //上传公司标志样式
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    height: 178px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 350px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar{
    width: 350px;
    height: 178px;
    display: inline-block;
  }
  .avatar-uploader {
    border: 0px dashed #d9d9d9;
  }
  .greyline{
      width: 100%;
      height: 2px;
      background-color: #eee;
      margin-bottom: 50px;
  }
  .backlo{
      color: #337DC7;
      font-size: 15px;
      font-weight: 500
  }
  .el-icon-back{
      padding-right: 6px
  }
   }
</style>